<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/logo.png" alt="">
      <p>天天兼职管理员后台</p>
    </div>
    <div class="back"></div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-position="top">
      <p class="text">天天兼职后台登录</p>
      <el-form-item label="手机号：" prop="iphone">
        <el-input class="input1" v-model.number="ruleForm.iphone" autocomplete="off" autofocus  placeholder="请输入您的手机号"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="code">
        <el-input  v-model.number="ruleForm.code" type="password"  placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-button type="primary" size="medium" @click="submitForm('ruleForm')">立即登录</el-button>
    </el-form>
  </div>
</template>

<script>
  import {getCookie,setCookie} from './until/index'
export default {
  data () {
    var validateiphone = (rule, value, callback) => {
      if (value==='') {
        return callback(new Error('手机号不能为空'))
      }else{
        setTimeout(() => {
        
          callback()

        }, 1000)
      }
      
    }
    var checkCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      }else{
        setTimeout(() => {
        
          callback()

        }, 1000)
      }
    }
    return {
      type: 'primary',
 
      codeonOff: false,

      code:'',

      ruleForm: {
        iphone: '',
        code: ''
      },
      rules: {
        iphone: [
          { validator: validateiphone, trigger: 'blur' }
        ],
        code: [
          { validator: checkCode, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    if(getCookie('userid')){
      this.$router.push({
        path:'index'
      })

    }
  },
  methods: {
    submitForm (formName) {

      this.$refs[formName].validate((valid) => {
        
        if (valid) {

            this.$ajax.get('/admLogin.ashx?mobile='+this.ruleForm.iphone+'&password='+this.ruleForm.code)
              .then(res=>{
                var data = res.data.data
                if(res.data.code == 200){
                  
                  setCookie('token',data.token,1)
                  setCookie('userid',data.uid,1)
                  
                  this.$message({
                    message: '登陆成功',
                    type: 'success',
                    onClose:()=>{
                      this.$router.push({
                        path:'/index'
                      })
                      // window.location.reload()
                    }
                  })
                }else{
                  this.$message.error(res.data.msg);
                }
                
              })
              .catch(error=>{
                console.log(error)
                this.$message({
                  message: '登录失败',
                  type: 'warning'
                })
              })
          
        } else {

          console.log('error')
          return false
        }
      })
    },
    
  }
}

</script>
<style scoped>
body{
  background: #f5f5f5
}
.text{
  font-size: 26px;
  color: #666;
  font-weight: bold;
  margin:0 auto 10px;
}
label {
  line-height: 30px
}
.el-form-item{
  text-align: left;
}
.l-captcha{
  padding-top: 10px;
  padding-bottom: 10px
}
.input2{
  margin-right: 13px;
  width: 250px;
  vertical-align: top;
}
.el-main{
  z-index: 100;
}
.login{
  width: 475px;
  margin: 20px auto 0;
  z-index: 999;
}
.logo{
  width: 100%;
  margin-bottom: 10px;
  z-index: 999;
}
.logo img{
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto;
}
.logo p{
  font-size: 16px;
  color: #fff;
}

.el-form{
  border-radius: 3px;
  background: #fff;
  padding: 30px 45px;
  z-index: 100;
}
.el-button--medium{
  padding: 15px 0;
  width: 100%;
}
.back{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 580px;
    /* background-image: url(../assets/letter_back.jpg); */
    background-color:grey;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}
</style>
